<template>
  <view class="" v-if="!loading">
    <view class="shop_title">
      <view class="nearby shop_title_1" @click='handleChoice'>
        附近门店
      </view>
      <view class="common shop_title_1">
        常用/收藏
      </view>
    </view>
    <view class="sousuo">
      <!-- 下拉框 -->
      <view class="selectCity" @click='toMap("/pages/map-address/map-address")'>
        <!-- <uni-section title="" type="line">
          <uni-data-select v-model="value" :localdata="range" @change="change" :clear="false" bgColor='#f8f8f8'>
          </uni-data-select>
        </uni-section> -->
        <text>成都  ️</text>
      </view>
      <!-- 搜索 -->
      <view class="search">
        <uni-search-bar style="background-color: #ecebeb;" class="uni-mt-10" radius="56" placeholder="搜索门店"
          clearButton="auto" cancelButton="none" @confirm="search" />
      </view>
    </view>
    <!-- 地图 -->
    <!-- <uni-collapse-item title="收起地图" :show-animation="true" open='true'>
      <view class="content">
        <map :latitude="latitude" :longitude="longitude"></map>
      </view>
    </uni-collapse-item> -->
    <!-- <map :latitude="latitude" :longitude="longitude"></map> -->
    <map id="map" class="map" :show-location="true" :latitude="latitude" :longitude="longitude"
      :markers="state.markers" @markertap="handleMarkerTap"></map>
    <view class="close_map">

      <view class="">
        收起地图
        <image src="../../static/icon/jt.png" mode=""></image>
      </view>
    </view>
    <!-- 地址明细 -->
    <template v-for="value in address1">
      <navigator url="../buy/buy">
        <shop_location :info="value"></shop_location>
      </navigator>
    </template>




  </view>

  <view class="loading" v-else>
    <image src="../../static/rests/loading.gif"></image>
  </view>
</template>

<script setup>
  import {
    ref,
    reactive,
    onMounted
  } from 'vue';
  import {
    onReady,
    onShow,
    onLoad
  } from "@dcloudio/uni-app";
  import {
    getAddress
  } from "../../services/address.js";


  let address1 = ref([]);
  onMounted(async (options) => {
    let data = await getAddress();
    console.log("111111", data);
    address1.value = data
    // console.log(movie.value);
  })




  // 设置地址经纬度
  let latitude = ref(35.141);
  let longitude = ref(89.325);

  onReady(() => {
    uni.getLocation({
      type: 'wgs84',
      success: res => {
        latitude.value = res.latitude;
        longitude.value = res.longitude;
      }

    });
    state._mapContext = uni.createMapContext("map");
  });


  //跳转页面
  function toMap(url) {
    uni.navigateTo({
      url
    })
  }



  const state = reactive({
    markers: [{
        id: 1,
        title: "茶百道(成都锦华路万达广场店)",
        address: "四川省成都市锦江区锦华路一段68号成都锦华路万达广场F3",
        phone: "(028)61111012",
        latitude: 30.626515,
        longitude: 104.102515,
        width: parseInt(72) + 'rpx',
        height: parseInt(100) + 'rpx',
        isActive: false
      },

    ]
  });

  //地图点击事件
  function handleMarkerTap(e) {

    state.markers.forEach(item => {
      item.isActive = false
      if (item.id == e.detail.markerId) {
        item.isActive = true
        cinemaName.value = item.title
      }
    })
  }



  function change(e) {
    console.log("e:", e);
  };
  let loading = ref(false);
</script>

<style>
  page {
    background-color: #f8f8f8;
  }

  .loading {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .loading image {
    width: 260rpx;
    height: 260rpx;
    position: relative;
    margin-top: 200rpx;
  }

  .shop_title {
    width: 458rpx;
    line-height: 66rpx;
    /* border: 1rpx solid; */
    margin: auto;
    font-size: 26rpx;
    color: #000;
    display: flex;
    justify-content: space-between;
    position: relative;
  }

  .shop_title view {
    width: 152rpx;
    /* border: 1rpx solid; */
  }

  /*   .shop_title_1 :before {
    content: "";
    width: 0;
    bottom: 0;
    left: 50%;
    border-bottom: 2px solid pink;
    position: absolute;
    transition: all linear .5s;
  }

  .animation {
    left: 0;
    bottom: 0;
    width: 100%;
    color: black;
  } */
  .selectCity {
    margin-top: 26rpx;
    width: 120rpx;
    line-height: 56rpx;
    padding-left: 40rpx;
    text-align: center;
  }

  .search {
    width: 510rpx;
    height: 56rpx;
  }

  .sousuo {
    display: flex;

  }

  map {
    width: 100%;
    height: 400rpx;
    margin-top: 32rpx;
  }

  .close_map {
    width: 100%;
    line-height: 66rpx;
    /* border: 1rpx solid; */
    display: flex;
    justify-content: center;
    align-items: center;
    color: #bbb;
    font-size: 20rpx;
    background-color: #fff;

  }

  .close_map image {
    width: 30rpx;
    height: 30rpx;
    position: relative;
    top: 10rpx;
  }
</style>